<template>
    <div style="width:100%">
      <div class="bg-white grid-content" style="text-align:center;">
        <el-form :inline="true" :model="sjfwForm" class="demo-form-inline">

          <el-form-item label="数据服务名称:">
            <el-input
              v-model="sjfwForm.fwmc"
              placeholder="请输入数据服务名称"
            ></el-input>
          </el-form-item>
          <el-form-item style="padding-left:150px" label="数据服务分类:">
            <el-select
                  v-model="sjfwForm.pid"
                  placeholder="请选择数据服务分类"
                >
                <el-option
                  v-for="(item, index) in fwlxList"
                  :key="item.id"
                  :label="item.fwmc"
                  :value="item.id"
                />
                <el-option label="新建分类" value="0"></el-option>
                </el-select>
          </el-form-item>
          <el-form-item style="padding-left:150px">
            <el-button type="primary" @click = "saveSjfw()">保存</el-button>
            <!-- <el-button type="success">取消</el-button> -->
          </el-form-item>
        </el-form>
      </div>

      <el-divider></el-divider>

      <el-row>
        <el-col :span="8">
          <div class="bg-white grid-content">
            <el-tree 
              :data="treeData" 
              node-key="id"
              :props="treeProps" 
              accordion
              @node-click="handleNodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>({{ data.zdmc }})</span>
              </span>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="bg-white grid-content" style="padding-bottom:19px">
            <el-transfer
              v-model="transferValue"
              :titles="['数据项', '已选数据项']"
              :props="{
                key: 'id',
                label: 'zdbt'
              }"
              :data="sjzdData"
              @change="rightCheckChange">
              <!-- <span slot-scope="{ option }">{{ option.zdbt }} - {{ option.zdmc }}</span> -->
            </el-transfer>
            <el-button type="primary" style="margin-left:34%;margin-top:-10px;" @click="saveSjfwInfo()">保存</el-button>
          </div>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <div class="bg-white grid-content" style="text-align:center;">
            <el-form :inline="true" :model="sjfwConditionForm" class="demo-form-inline">
              <el-form-item> 
                <el-tooltip placement="top-start" effect="light">
                  <div slot="content">多表关系：cd_well_source LEFT JOIN pc_organization ON cd_well_source.ORG_ID = pc_organization.ORG_ID<br/>and org_id = "1"</div>
                  <el-button>填写示例</el-button>
                </el-tooltip>
              </el-form-item>

              <el-form-item label="多表关系：">

                  <el-input type="textarea" v-model="sjfwConditionForm.cxtj"></el-input>

              </el-form-item>
              
              <el-form-item style="padding-left:220px" label="查询条件：">

                  <el-input type="textarea" v-model="sjfwConditionForm.jhtj"></el-input>

              </el-form-item>
              <el-form-item style="padding-left:250px"> 
                <el-button type="primary" @click = "addDbgx()">添加</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="bg-white grid-content">
            <el-table
              :data="sjfwgxList"
              :header-cell-style="{background:'#F5F7FA',color:'#909399'}"
              border
              stripe
              style="width: 100%; margin-bottom: 10px"
            >
              <el-table-column prop="cxtj" label="多表关系" width="600" align="center"></el-table-column>
              <el-table-column prop="jhtj" label="查询条件" width="600" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-delete"
                    type="danger"
                    size="small"
                    @click="handleDelete(scope.row)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
import sjfwApi from "@/api/dtbb/sjfw";
import sjzdApi from "@/api/dtbb/sjzd";

export default{
  data(){
    return{
      fwlxList:[],//数据服务分类列表
      sjfwID:'',
      treeData:[],
      //树形控件的属性绑定对象
      treeProps: {
          children: 'children',
          label: 'zdbt',
      },
      sjfwForm:{
        id:'',
        fwmc:'',
        fwlx:'',
        pid:'',
      },
      //获取点击的树形节点id
      checkTreeID:'',
      checkTreeZdbt:'',
      checkTreeZdmc:'',
      //穿梭框数据
      sjzdData:[],
      transferValue:[],
      returnResult:[],

      //
      sjfwConditionForm:{
        id:'',
        sjfwIndexId:'',
        cxtj:'',
        jhtj:'',
      },
      //表格数据
      sjfwgxList:[],
      
    }
  },
  created(){

  },
  mounted(){
    this.searchTreeList();
    this.searchFwlx();
  },
  methods: {
    /**
     * 查询服务类型
     */
     async searchFwlx() {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await sjfwApi.getList({pageNo:-1,pageSize:-1,fwlx:'0'});
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.fwlxList = res.data.records;
      }
    },
    /**
     * 查询树形列表
     */
     async searchTreeList() {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await sjzdApi.getTreeList();
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.treeData = res.data;
      }
    },
    //查询表对应的数据字典列表
    async searchList(id) {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await sjzdApi.getList({pageNo:-1,pageSize:-1,pid:id});
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.sjzdData = res.data.records;
      }
    },

    //点击树形节点
    handleNodeClick(data) {
      console.log(data);
      this.checkTreeID = data.id;
      this.checkTreeZdbt = data.zdbt;
      this.checkTreeZdmc = data.zdmc;
      this.searchList(data.id);
    },
    //穿梭框右侧变化
    rightCheckChange(){
      console.log("sjfu...");
      console.log(this.transferValue);
      this.returnResult=[];

      var arr=[];
      for(var i = 0 ; i < this.transferValue.length; i++){ 
          let obj={}
          
          obj= this.sjzdData.find((item)=>{
              return item.id === this.transferValue[i];
          });
          console.log(obj);
          arr.push(obj);
          
      }
      console.log(arr);

      for(let j=0; j<arr.length; j++){
        if(arr[j]!=undefined){
          let a ={id:'',sjzdId:arr[j].id,sjfwIndexId:this.sjfwID,zdbt:arr[j].zdbt,zdmc:arr[j].zdmc,sjybt:this.checkTreeZdbt,sjymc:this.checkTreeZdmc}
          this.returnResult.push(a);
        }
          
      }
        
        console.log(this.returnResult);
    },

    //保存数据服务
    async saveSjfw(){
      if(this.sjfwForm.pid ==='0'){
        this.sjfwForm.fwlx ='0';
      }else{
        this.sjfwForm.fwlx ='1';
      }
      console.log('form'+JSON.stringify(this.sjfwForm));
      let res = await sjfwApi.add(this.sjfwForm);

      console.log(res)
      //判断是否成功
      if (res.success) {
          this.sjfwID = res.data;
          this.$message.success(res.message);
      } else {
          console.log(res)
          this.$message.error(res.message);
      }
    },
    //保存数据服务字段详情
    async saveSjfwInfo(){
      if(this.sjfwID!=''){
        console.log(this.returnResult);
        let res = await sjfwApi.addList(this.returnResult);
        console.log(res)
        //判断是否成功
        if (res.success) {
            this.returnResult=[];
            this.$message.success(res.message);
        } else {
            console.log(res)
            this.$message.error(res.message);
        }
      }else{
        this.$message.error('请先添加数据服务');
      }
      
    },

    //保存数据服务关系
    async addDbgx(){
      if(this.sjfwID!=''){
        this.sjfwConditionForm.sjfwIndexId = this.sjfwID
        console.log(this.sjfwConditionForm);
        let res = await sjfwApi.addSQL(this.sjfwConditionForm);

        console.log(res)
        //判断是否成功
        if (res.success) {
            this.$message.success(res.message);
            this.searchDbgx();
        } else {
            console.log(res)
            this.$message.error(res.message);
        }
      }else{
        this.$message.error('请先添加数据服务');
      }
      
      
    },

    async handleDelete(row){
      let confirm = await this.$myconfirm("确定要删除该数据吗?");
        console.log(confirm)
        if (confirm) {
          //发送删除请求
          console.log('111')
          let res = await sjfwApi.deleteSQL({ id: row.id });
          console.log('222')
          console.log(res)
          //判断是否成功
          if (res.success) {
            //成功提示
            this.$message.success(res.message);
            //刷新
            this.searchDbgx();
          } else {
            //失败提示
            this.$message.error(res.message);
          }
        }
    },
    //查询数据服务关系
    async searchDbgx() {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await sjfwApi.getSQLList({pageNo:-1,pageSize:-1,sjfwIndexId:this.sjfwID});
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.sjfwgxList = res.data.records;
      }
    },


  },

};
</script>


<style lang="scss" scoped>


//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 20px 20px 0px 20px;
  // margin-bottom: 10px;
  border-radius: 4px;
  margin: 0px auto;
  
}
.el-transfer{
  padding-left: 66px;
}
.el-tree{
  padding-left: 100px;
}

/* 设置穿梭框的 宽高 */
.el-transfer-panel{
 width : 540px;
 height: 400px;
 }
 .el-transfer-panel__list {
 margin: 0;
 padding: 6px 0;
 list-style: none;
 height: 390px;
 overflow: auto;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }
 .el-transfer__buttons {
 display: inline-block;
 vertical-align: middle;
 padding: 0 30px;
 }

 .el-divider--horizontal{
  margin: 0 0 0 0;
 }

 .el-textarea{
  width: 200%;
 }
</style>